<!DOCTYPE html>
<meta charset="utf-8">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
li { display: inline; }
li:after { content: " •"; }
</style>
<ul dir="rtl">
<li><a href="#" id="clickme1">Click Me 1</a></li>
<li dir="ltr"><a href="#" id="clickme2">Click Me 2</a></li>
</ul>
<div id="log"></div>
<script>
test(function(t)
{
    if (!window.eventSender)
        return;

    ['clickme1', 'clickme2'].forEach(function(id) {
        var gotClick = false;
        var element = document.getElementById(id);
        element.addEventListener('click', function() { gotClick = true; });

        eventSender.mouseMoveTo(element.offsetLeft + element.offsetWidth / 2, element.offsetTop + element.offsetHeight / 2);
        eventSender.mouseDown();
        eventSender.mouseUp();

        assert_true(gotClick);
    });
}, "Test if the click event is fired when hitting the culled inline element having the pseudo element :after as a child");
</script>
